<template>
  <div>
    <canvas ref="chartCanvas"></canvas>
  </div>
</template>

<script>
export default {
  name: 'BarChart',
  mounted() {
    this.createBarChart();
  },
  methods: {
    createBarChart() {
      const ctx = this.$refs.chartCanvas.getContext('2d');
      const data = {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
          label: 'Monthly Sales',
          data: [65, 59, 80, 81, 56],
          backgroundColor: [
            'rgba(75, 192, 192, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(254, 99, 132, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(75, 192, 192, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(254, 99, 132, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      };
      const options = {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      };
      new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
      });
    }
  }
};
</script>

<style scoped>
div {
  width: 60%;
  height: 400px;
  margin: 0 auto;
}
</style>
